anchor ack-button
.ui.segments
    h3.ui.top.attached.block.header ack-button #[a(href="#ack-button") #[i.linkify.icon]]
    .ui.attached.segment
        pre ack-button(on-buttonclick="testAckButton1" value="\{{ button.boundVal }}") MY BUTTON

    h3.ui.block.big.attached.header Examples
    .ui.attached.segment
        h3.header Buttons has icons representing their states 
        ack-button.green(state="") Button Text
        ack-button.green(state="doing") Button Text
        ack-button.green(state="done") Button Text
        ack-button.green(state="error") Button Text

    h3.ui.attached.block.header Show/hide test
    .ui.attached.segment
        checkbox(checked="{{ button.show }}") Show/hide Bound component 1

        +if('button.show')
            ack-button(state="{{button.state1}}" on-buttonclick="testAckButton1" value="{{ button.boundVal }}") My Button
            ack-button.red(state="{{button.state1}}" on-buttonclick="testAckButton1" value="{{ button.boundVal }}") My Button
            ack-button.green(state="{{button.state1}}" on-buttonclick="testAckButton1" value="{{ button.boundVal }}") My Button
            ack-button.blue.basic(state="{{button.state1}}" on-buttonclick="testAckButton1" value="{{ button.boundVal }}") My Button

    h3.ui.attached.block.header Action test 
    .ui.attached.segment 
        span.
            #[ack-button.teal(state="{{button.state1}}" on-buttonclick="testAckButton1" value="{{ button.boundVal }}") My Button]
            will send #[.ui.input #[input(value="{{ button.boundVal }}" placeholder="this value")]]
            to here => #[.ui.teal.label {{ button.sendValue }}] after 3 seconds...
        p Button state: {{ button.state1 }}
        
    h3.ui.attached.block.header Modal Dialogs
    .ui.attached.segment 
        p.
            Buttons can fire modal window upon error with custom error message 
            passed by #[code ... value="my message" ...] attribute

        ack-button.red(on-buttonclick="testAckButton2" value="my error value") Test Error
        ack-button.blue(on-buttonclick="testAckButton3" value="my info value") Test Info
        ack-button.orange(on-buttonclick="testAckButton4" value="my yesno value") Test Yesno

    h3.ui.attached.block.header Large button example
    .ui.segment
        ack-button.blue.fluid(
            on-buttonclick="testAckButton2"
            value="{{ button.infoMessage }}"
            ) Login
